<template>
  <div class="main">
    <comm-back></comm-back>
    <div class="bg">
      <img src="@/assets/img/wz/wz-bg.png" alt="" />
    </div>
    <van-tabs v-model="active" animated>
      <van-tab v-for="item in arr" :key="item.index" :title="item.title">
        <div class="title">
          <div class="line"></div>
          <span>{{ item.title }}指南</span>
          <div class="line"></div>
        </div>
        <img v-for="i in item.img" :key="i.index" :src="i" alt="" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import img10 from "@/assets/img/wz/1-0.png";
import img11 from "@/assets/img/wz/1-1.png";
import img12 from "@/assets/img/wz/1-2.png";
import img2 from "@/assets/img/wz/2-0.png";
import img3 from "@/assets/img/wz/3-0.png";
import img4 from "@/assets/img/wz/4-0.png";
import CommBack from "@/components/CommBack.vue";
export default {
  name: "Prevention",
  components:{
    CommBack,
  },
  data() {
    return {
      active: 0,
      arr: [
        {
          img: [img10, img11, img12],
          title: "消毒剂",
        },
        {
          img: [img2],
          title: "口罩",
        },
        {
          img: [img3],
          title: "洗手液",
        },
        {
          img: [img4],
          title: "温度计",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  max-width: 750px;
  background-color: #ececec;
  img {
    width: 100%;
  }
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.4rem;
  background-color: #fff;
  span {
    margin: 0.2rem 0.3rem;
  }
  .line {
    display: inline-block;
    width: 0.3rem;
    height: 0.02rem;
    background: #ccc;
  }
}
/deep/.van-tab__pane {
  width: 95%;
  margin: 0.2rem auto;
  border-radius: 10px;
  overflow: hidden;
}
</style>